/* min 400*280 */

html, body {
	height: 100%;
}

body {
	margin: 0px;
	padding: 0px;
	font-family: Verdana;
	font-size: 12pt;
}

.menu {
	margin: 0px;
	padding: 0.2em;
	border: 0.1em solid black;
	border-radius: 0.4em;
}

.menu > ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	float: left;
}

.menu > ul > li {
	display: inline-block;
	border: 0.1em solid red;
	/*width: 10em;
	text-align: center;*/
	padding: 0.2em;
	border-radius: 0.2em;
	cursor: pointer;
}

.menu > ul > li:hover, .username:hover {
	background-color: yellow;
}

.username {
	padding: 0.2em;
	margin-left: 84%;
	text-align: center;
	border: 0.1em solid red;
	padding: 0.2em;
	border-radius: 0.2em;
	cursor: pointer;
}

.username > ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: none;
	z-index: 100;
	position: absolute;
	width: inherit;
}

.username > ul > li {
	border: 0.1em solid red;
	padding: 0.2em;
	border-radius: 0.2em;
	background-color: white;
}

.view > ul {
	display: block !important;
}

.view > ul > li:hover {
	background-color: yellow;
}

.avatar {
	width: 1.3em;
	height: 1.3em;
	background: black url("/images/no_avatar.jpg") no-repeat;
	background-size: cover;
	margin-right: 0.5em;
	float: left;
}

.loginform {
	border: 0.1em solid black;
	padding: 0.2em;
	border-radius: 0.2em;
	margin: 0px auto;
	width: 50%;
}

.loginform input[type="text"], .loginform input[type="password"] {
	width: 50%;
	font-size: 18pt;
}

.loginform button {
	font-size: 18pt;
}

.loginform div {
	margin-top: 2px;
	margin-bottom: 2px;
	text-align: right;
}

aside {
	width: 30%;
	float: left;
	margin: 0px;
	padding: 0.2em;
	border: 0.1em solid black;
	border-radius: 0.4em;
}

section.contents {
	margin: 0px;
	margin-left: 32%;
	padding: 0.2em;
	border: 0.1em solid black;
	border-radius: 0.4em;
}

footer {
	clear: left;
	margin: 0px;
	padding: 0.2em;
	border: 0.1em solid black;
	border-radius: 0.4em;
	font-size: 10pt;
	text-align: center;
}

.browser {
	float: left;
	margin: 0px;
	padding: 0.2em;
	border: 0.1em solid black;
	border-radius: 0.4em;
	width: 74%;
	height: 64%;
}

.browser form, .browser form table {
	height: 99.5%;
}

.controls {
	width: 99.5%;
}

.controls tr {
	margin: 0px;
	padding: 0px;
}

.controls tr:nth-child(1) {
	height: 20px;
}

.controls tr td:nth-child(1), .controls tr td:nth-child(2), .controls tr td:nth-child(4) {
	width: 22px;
	padding-right: 0px;
	padding-left: 0px;
}

.controls tr:nth-child(2) td {
	padding: 0px;
}

button[type="button"] {
	margin: 0px;
}

#url {
	width: 99.5%;
}

#browsercontainer {
	height: 100%;
}

#mainwindow {
	width: 99.5%;
	height: 99.5% !important;
}

.testcase {
	margin: 0px;
	margin-left: 75.6%;
	padding: 0.2em;
	border: 0.1em solid black;
	border-radius: 0.4em;
	height: 64%;
}

.testcontrolswrapper {
	width: 99.5%;
	height: 99.5%;
}

.testcontrolswrapper tr:nth-child(1) {
	height: 20px;
}

.testcontrolswrapper tr:nth-child(2) {
	height: 10px;
}

.testcontrols {
	width: 99.5%;
}

.testcontrols tr td button {
	width: 100%;
}

.testcontrols2 tr td button img {
	width: 20px;
	height: 20px;
}

#testcasecontainer {
	width: 99.5%;
	height: 99.5%;
	border: none;
}

.logs {
	clear: left;
	height: 16%;
	margin: 0px;
	padding: 0.2em;
	border: 0.1em solid black;
	border-radius: 0.4em;
}

#logscontainer {
	width: 99.5%;
	height: 99.5%;
	border: none;
}

.statusbar {
	margin: 0px;
	padding: 0.2em;
	border: 0.1em solid black;
	border-radius: 0.4em;
}

@media screen and (max-width: 800px) {
	.testcontrols tr td button img {
		width: 20px;
		height: 20px;
	}

	.testcontrols2 tr td button img {
		width: 14px;
		height: 14px;
	}

	.username {
		margin-left: 77%;
	}
}

@media screen and (max-width: 550px) {
	.testcontrols tr td button img {
		width: 10px;
		height: 10px;
	}

	.testcontrols2 tr td button img {
		width: 7px;
		height: 7px;
	}

	.username {
		margin-left: 90%;
	}

	.username div:nth-child(2) {
		display: none;
	}
}
